<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../dist/claygl.js"></script>
        <script type="text/javascript" src="js/config.js"></script>
    </head>
    <body style="margin:0px;background-color:#20242B;">
        <canvas width="1200" height="640" id="main"></canvas>
        <div id="time" style="position:absolute;left:10px;top:10px;color:white;"></div>
        <script type="text/javascript">
            var Material = clay.Material;
            var Mesh = clay.Mesh;
            var Cube = clay.geometry.Cube;
            var meshUtil = clay.util.mesh;
            var timeline =  new clay.Timeline;
            timeline.start();

            var renderer = new clay.Renderer({
                canvas: document.getElementById("main")
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var scene = new clay.Scene;
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect(),
                far: 500
            });
            var stereoCamera = new clay.vr.StereoCamera();

            var cube = new Cube();
            cube.generateTangents();
            var shader = clay.shader.library.get('clay.standard');
            var material = new Material({
                shader: shader
            });
            material.set('glossiness', 0.4);
            var diffuse = new clay.Texture2D;
            diffuse.load("assets/textures/crate.gif");
            var normal = new clay.Texture2D;
            normal.load("assets/textures/normal_map.jpg");
            material.set('diffuseMap', diffuse);
            material.set('normalMap', normal);

            var root = new clay.Node();
            scene.add(root);
            var cubeMesh = new Mesh({
                geometry: cube,
                material: material
            });
            for( var i = 0; i < 10; i++){
                for(var j = 0; j < 10; j++){
                    for( var k = 0; k < 10; k++){
                        var mesh = new clay.Mesh({
                            geometry: cube,
                            material: material
                        });
                        mesh.position.set(50 - Math.random() * 100, 50 - Math.random() * 100, 50-Math.random() * 100);
                        mesh.scale.set(1, 1, 1);
                        root.add(mesh);
                    }
                }
            }
            var light = new clay.light.Point({
                range: 200
            });
            scene.add(light);
            scene.add(new clay.light.Ambient({
                intensity: 0.4
            }))

            camera.position.set(0, 0, 10);

            timeline.on('frame', function(deltaTime) {
                var start = new Date().getTime();

                camera.aspect = renderer.getWidth() / renderer.getHeight();
                camera.update();
                stereoCamera.updateFromCamera(camera);

                renderer.setViewport(0, 0, renderer.getWidth() / 2, renderer.getHeight());
                renderer.render(scene, stereoCamera.getLeftCamera());

                renderer.setViewport(renderer.getWidth() / 2, 0, renderer.getWidth() / 2, renderer.getHeight());
                renderer.render(scene, stereoCamera.getRightCamera());

                root.rotation.rotateY(Math.PI / 2000);
            });

            window.onresize = function () {
                renderer.resize(window.innerWidth, window.innerHeight);
            }

        </script>
    </body>
</html>